<!DOCTYPE html>
<html xmlns:layout="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org"
	layout:decorate="~{common/layout}">

<head>
	<meta charset="UTF-8">
	<title>我的项目</title>
	<style>
	 
	</style>
</head>

<body>
	<div layout:fragment="fragment_body">
		<div class="toolbar">
			<div style="margin-right: 12px; width: 220px;">
				<el-input placeholder="请输入项目名称"></el-input>
			</div>
			<div style="flex: 1 1 0%;">
				<el-button-group  style="margin-right: 12px">
					<el-button @click="changeStatus(null)" :type="listStatus == null ?'primary':''"
						icon="Document">全部</el-button>
					<el-button @click="changeStatus(1)" :type="listStatus == 1 ?'primary':''"
						icon="CircleCheck">我发起</el-button>
					<el-button @click="changeStatus(0)" :type="listStatus == 0 ?'primary':''"
						icon="CircleClose">我受邀</el-button>
				</el-button-group>
				<el-select v-model="channelMode" style="margin-right: 12px;width: 130px;">
					<el-option label="全部计算模式" value="0"></el-option>
					<el-option label="管道模式" value="1"></el-option>
				</el-select>
				<el-select v-model="projectType" style="margin-right: 12px;width: 130px;">
					<el-option label="全部项目" value="0"></el-option>
					<el-option label="归档中" value="1"></el-option>
					<el-option label="已归档" value="1"></el-option>
				</el-select>
			</div>
			<el-button type="primary" @click="openForm" icon="DocumentAdd" v-if="list != null && list.length > 0">新增项目</el-button>
		</div>
		<div  v-loading="listLoading">
			<el-empty description="暂无项目" v-if="list == null || list.length == 0">
				<el-button size="large" round plain type="primary" @click="openForm(null)" icon="DocumentAdd">开始创建一个项目</el-button>
			</el-empty>
			<el-table :data="list" v-if="list !== null && list.length > 0" border style="width: 100%;margin-top: 12px;" >
				<el-table-column prop="projectName" label="项目名称" rowspan="2"></el-table-column>
				<el-table-column prop="projectModel" label="计算功能" width="150">
					<template #default="scope">
						{{'模型训练-联合建模'}}
					</template>
				</el-table-column>
				<el-table-column prop="projectChannel" label="计算模式">
					<template #default="scope">
						{{'管道模式'}}
					</template>
				</el-table-column>
				<el-table-column prop="nodeCode" label="本节点"></el-table-column>
				<el-table-column prop="projectName" label="参与节点">
					<template #default="scope">
						<el-tag effect="plain" v-for="(invite, iidx) in scope.row.invites" >{{invite.node.nodeTitle}}</el-tag>
					</template>
				</el-table-column>
				<el-table-column prop="projectName" label="训练流数量">
					<template #default="scope">
						{{'1'}}
					</template>
				</el-table-column>
				<!--<el-table-column prop="projectName" label="任务数">
					<template #default="scope">
						{{'0'}}
					</template>
				</el-table-column>-->
				<el-table-column prop="projectDesc" label="描述"></el-table-column>
				<el-table-column prop="projectStatus" label="状态" width="100">
					<template #default="scope">
						<el-tag size="small" type="warning" v-if="scope.row.job == null">待运行</el-tag>
						<el-tag size="small" type="info" v-if="scope.row.job != null && scope.row.job.jobStatus == 'READY'">初始化</el-tag>
						<el-tag size="small" type="primary" v-if="scope.row.job != null && scope.row.job.jobStatus == 'RUNNING'">运行中</el-tag>
						<el-tag size="small" type="danger" 	v-if="scope.row.job != null && scope.row.job.jobStatus == 'FAILED'">运行失败</el-tag>
						<el-tag size="small" type="warning" v-if="scope.row.job != null && scope.row.job.jobStatus == 'STOPED'">运行停止</el-tag>
						<el-tag size="small" type="success" v-if="scope.row.job != null && scope.row.job.jobStatus == 'SUCCEEDED'">运行成功</el-tag>
					</template>
				</el-table-column>
				<el-table-column prop="projectFinish" label="归档" width="100">
					<template #default="scope">
						<el-tag size="small" type="warning" v-if="scope.row.projectFinish == 0">未归档</el-tag>
						<el-tag size="small" type="success" v-if="scope.row.projectFinish == 1">已归档</el-tag>
					</template>
				</el-table-column>
				<el-table-column prop="projectCreate" label="创建时间" width="150"></el-table-column>
				<el-table-column prop="projectFinishTime" label="结束时间" width="150"></el-table-column>
				<el-table-column prop="projectId" label="操作" width="200">
					<template #default="scope">
						<el-button type="success" text bg size="small" @click="viewProject(scope.row.projectId)">进入</el-button>
						<el-button v-if="scope.row.projectFinish == 0" type="warning" text bg size="small" @click="finishProject(scope.row.projectId)">归档</el-button>
						<el-button v-if="scope.row.projectFinish == 0" type="danger" text bg size="small" @click="clearingProject(scope.row.projectId)">释放</el-button>
					</template>
				</el-table-column>
			</el-table>
		</div>
		<!--弹框-->
		<el-drawer v-model="projectForm.visible" title="新建项目" direction="rtl">
			<el-form :model="projectForm" :rules="projectFormRules" ref="projectForm" label-width="100px">
				<el-form-item label="项目名称" prop="name">
					<el-input v-model="projectForm.name"></el-input>
				</el-form-item>
				<el-form-item label="项目描述" prop="desc">
					<el-input v-model="projectForm.desc"></el-input>
				</el-form-item>
				<el-form-item label="计算功能" prop="model">
					<el-select v-model="projectForm.model" placeholder="计算功能">
						<el-option label="模型训练-联合建模" value="0"></el-option>
					</el-select>
					<span>支持DAG，实现隐私求交、模型训练、模型预测、模型评估全流程</span>
				</el-form-item>
				<el-form-item label="计算模式" prop="channel">
					<el-select v-model="projectForm.channel" placeholder="计算模式">
						<el-option label="管道模式" value="0"></el-option>
					</el-select>
					<span>MPC、FL等多方模式</span>
				</el-form-item>
				<el-form-item label="本方节点" prop="ownerId">
					<el-select v-model="projectForm.ownerId" placeholder="本方节点" @change="changeNodeSelect">
						<el-option
					      v-for="item in nodes"
					      :key="item.nodeId"
					      :label="item.nodeCode"
					      :value="item.nodeId"
					    ></el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="参与节点" prop="inviteNodes">
					<el-select v-model="projectForm.inviteNodes" placeholder="参与节点" multiple >
						<el-option
					      v-for="item in routes"
					      :key="item.nodeId"
					      :label="item.nodeCode"
					      :value="item.nodeId"
					    ></el-option>
					</el-select>
				</el-form-item>
			</el-form>
			<template #footer>
				<el-button @click="closeForm">取 消</el-button>
				<el-button type="primary" @click="saveForm">创建</el-button>
			</template>
		</el-drawer>
	</div>
</body>
<script type="text/javascript" layout:fragment="fragment_script">
	const _data = {
		list: [],
		nodes: [],
		routes: [],
		listStatus: null,
		listLoading: false,
		channelMode: '0',
		projectType: '0',
		projectForm: {
			visible: false,
			name: '',
			desc: '',
			ownerId: '',
			inviteNodes:[]
		},
		projectFormRules: {
			name: [
				{required: true, message: '请输入项目名称', trigger: 'blur'}
			],
			desc: [
				{required: false, message: '请输入', trigger: 'blur'}
			],
			model: [
				{required: true, message: '请选择计算功能', trigger: 'change'}
			],
			channel: [
				{required: true, message: '请选择计算模式', trigger: 'change'}
			],
			ownerId: [
				{required: true, message: '请选择本节点', trigger: 'change'}
			],
			inviteNodes: [
				{required: true, message: '请选择参与节点', trigger: 'change'},
				{validator: function (rule, value, callback) {
			      if (value.includes(that.projectForm.ownerId)) {
			        callback(new Error("参与节点不能出现本节点"));
			      } else {
			        callback();
			      }
			    }, trigger: 'blur'}
			],
		},
	}
	const _method = {
		changeStatus(val) {
			this.listStatus = val
		},
		openForm(row){
			that.projectForm.visible = true
		},
		viewProject(pId){
			window.location.href='/project/detail?id=' + pId
		},
		loadProjectList() {
			let that = this
			that.listLoading = true
			getRequst('/project/list').then(function (resp) {
				that.list = resp.data
				that.listLoading = false
			})
		},
		changeNodeSelect(nodeId){
			this.projectForm.inviteNodes = null
			this.loadRouteNodeList(nodeId)
		},
		loadNodeList() {
			let that = this
			getRequst('/node/list').then(function (resp) {
				that.nodes = resp.data
			})
		},
		loadRouteNodeList(nodeId) {
			let that = this
			getRequst('/nodeRoute/nodesByRoute?nodeId=' + nodeId).then(function (resp) {
				that.routes = resp.data
			})
		},
		closeForm() {
			this.$refs["projectForm"].resetFields();
			this.projectForm.visible = false
		},
		saveForm() {
			let that = this
			that.$refs["projectForm"].validate((valid) => {
				if (valid) {
					postRequst('/project/create', that.projectForm).then(function (resp) {
						if (resp.status == 0) {
							that.loadProjectList()
							that.projectForm.visible = false
							that.$message({message: resp.msg, type: "success"});
						} else {
							that.$message({message: resp.msg, type: "error"});
						}
					})
				}
			});
		},
		finishProject(projectId){
			getRequst('/project/finish?projectId=' + projectId).then(function (resp) {
				if (resp.status == 0) {
					that.loadProjectList()
					that.$message({message: resp.msg, type: "success"});
				} else {
					that.$message({message: resp.msg, type: "error"});
				}
			})
		},
		clearingProject(projectId){
			that.$messageBox.confirm('高危操作，是否清空项目所有数据?')
			.then(() => {
				getRequst('/project/clearing?projectId=' + projectId).then(function (resp) {
					if (resp.status == 0) {
						that.loadProjectList()
						that.$message({message: resp.msg, type: "success"});
					} else {
						that.$message({message: resp.msg, type: "error"});
					}
				})
			})
			.catch(() => {
				// catch error
			})
		}
	}
	function _created() {
		this.loadNodeList()
		this.loadProjectList()
	}
	const _watch = {
		
	}
</script>

</html>